<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

    <script src="../js/vue.js"></script>
    <script src="../js/axios-0.18.0.js"></script>

    <!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!--<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>-->
    <style>
        .centered-div {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: white;
            padding: 20px;
            width: 500px;
            height: 650px;
            z-index: 999;
            display: none;
            border: 1px solid black;
            margin: 5px 0;
        }

        .update-div {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: white;
            padding: 20px;
            width: 500px;
            height: 650px;
            z-index: 999;
            display: none;
            border: 1px solid black;
        }
    </style>
</head>
<body>
<div id='app'>
    <el-button type="primary" round @click="addMemberHandle">刷新数据</el-button>
    <el-button type="primary" round @click="addUser">新增广告</el-button>
    <el-table
            :data='pagedData'
            stripe
            :border='true'
            max-height='800px'
    >
        <el-table-column width="80px" prop='ad_id' label='id' header-align="center" align="center"></el-table-column>
        <el-table-column width="125px" prop='ad_brand_name' label='广告名称' header-align="center"
                         align="center"></el-table-column>
        <el-table-column width="200px" prop='ad_website' label='广告地址' header-align="center"
                         align="center"></el-table-column>
        <el-table-column width="200px" prop='ad_company_name' label='公司名称' header-align="center"
                         align="center"></el-table-column>
        <el-table-column width="200px" prop='ad_description' label='简介' header-align="center"
                         align="center"></el-table-column>
        <el-table-column width="80px" prop='ad_size' label='广告大小' header-align="center"
                         align="center"></el-table-column>
        <el-table-column width="80px" prop='user_id' label='所属用户' header-align="center"
                         align="center"></el-table-column>
        <el-table-column width="80px" prop='ad_status' label='状态' header-align="center" align="center">
            <template slot-scope="scope">
                <span v-if="scope.row.ad_status == 1" style="color:green;">启用</span>
                <span v-else style="color: red;">禁用</span>
            </template>
        </el-table-column>
        <el-table-column width="250px" fixed='right' label='操作'>
            <template slot-scope='scope'>
<!--                <el-button @click='updateaddUser(scope.$index)'>修改</el-button>-->
                <el-button @click='updateaddUser(scope.row.ad_id)'>修改</el-button>
                <el-button @click="removeCol(scope.row.ad_id)">移除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <div class="tabListPage">
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[10,11,12,13,14,15]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </div>

    <div class="centered-div" id="windows" style="border: none;box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3),0 -1px 2px rgba(0, 0, 0, 0.2);">
        <h1>新增广告</h1>
        <el-form ref="advForm" :model="advForm" label-width="100px">
            <el-form-item label="广告名称：">
                <el-input v-model="advForm.ad_brand_name"></el-input>
            </el-form-item>
            <el-form-item label="广告网址：">
                <el-input v-model="advForm.ad_website"></el-input>
            </el-form-item>
            <el-form-item label="公司名称：">
                <el-input v-model="advForm.ad_company_name"></el-input>
            </el-form-item>
            <el-form-item label="简介：">
                <el-input v-model="advForm.ad_description"></el-input>
            </el-form-item>
            <el-form-item label="广告大小：">
                <el-input v-model="advForm.ad_size"></el-input>
            </el-form-item>
            <el-form-item label="上传图片：">
                <el-upload
                        class="upload-demo"
                        ref="upload"
                        action="http://localhost:8080/MillionYuan/UploadServlet"
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        :file-list="fileList"
                        :limit="1"
                        :auto-upload="true">
                    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                    <!--                    <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>-->
                </el-upload>
            </el-form-item>
            <el-form-item label="当前状态">
                <el-radio-group v-model="advForm.ad_status">
                    <el-radio label="1">启用</el-radio>
                    <el-radio label="0">禁用</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="所属用户">
                <el-select v-model="advForm.user_id" placeholder="请选择所属用户">
                    <el-option v-for="item in userOptions"
                               :key="item"
                               :label="item"
                               :value="item">
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div style="display: flex; justify-content: center; margin-top: 20px;">
            <el-button type="primary" plain @click="onSubmit('advForm')">确认</el-button>
            <el-button type="success" plain @click="onCacel" style="margin-left: 10px;">取消</el-button>
        </div>
    </div>


    <div class="update-div" id="update" style="border: none;box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3),0 -1px 2px rgba(0, 0, 0, 0.2);">
        <h1>修改信息</h1>
        <el-form ref="updateForm" :model="updateForm" label-width="100px">
            <el-form-item label="广告名称：">
                <el-input v-model="updateForm.ad_brand_name"></el-input>
            </el-form-item>
            <el-form-item label="广告网址：">
                <el-input v-model="updateForm.ad_website"></el-input>
            </el-form-item>
            <el-form-item label="公司名称：">
                <el-input v-model="updateForm.ad_company_name"></el-input>
            </el-form-item>
            <el-form-item label="简介：">
                <el-input v-model="updateForm.ad_description"></el-input>
            </el-form-item>
            <el-form-item label="广告大小：">
                <el-input v-model="updateForm.ad_size"></el-input>
            </el-form-item>
            <el-form-item label="上传图片：">
                <el-upload
                        class="upload-demo"
                        ref="upload"
                        action="http://localhost:8080/MillionYuan/UploadServlet"
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        :file-list="fileList"
                        :limit="1"
                        :auto-upload="true">
                    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                    <!--                    <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>-->
                </el-upload>
            </el-form-item>
            <el-form-item label="当前状态">
                <el-radio-group v-model="updateForm.ad_status">
                    <el-radio label="1">启用</el-radio>
                    <el-radio label="0">禁用</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="所属用户">
                <el-select v-model="updateForm.user_id" placeholder="请选择所属用户">
                    <el-option v-for="item in userOptions"
                               :key="item"
                               :label="item"
                               :value="item">
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <el-button type="primary" plain @click="UpdateonSubmit('updateForm')">确认</el-button>
        <el-button type="success" plain @click="updateonCacel">取消</el-button>
    </div>


</div>

<script>
    new Vue({
        el: "#app",
        data() {
            return {
                tableData1: [],
                userOptions: [],  //用于存储username数据
                currentRow: null,
                mutipleSelection: [],
                fileList: [], //用于存储图片
                search: '',
                advForm: {
                    ad_brand_name: '',
                    ad_website: '',
                    ad_company_name: '',
                    ad_description: '',
                    ad_status: '',
                    ad_size: '',
                    user_id: '',
                },
                userForm: {
                    username: '',
                    nickname: '',
                    psw: '',
                    email: '',
                },
                updateForm: {
                    ad_id: '',
                    ad_brand_name: '',
                    ad_website: '',
                    ad_company_name: '',
                    ad_description: '',
                    ad_status: '',
                    ad_size: '',
                    user_id: '',
                },
                // 默认显示第一页
                currentPage: 1,
                // 总条数，根据接口获取数据长度(注意：这里不能为空)
                total: 0,
                // 默认每页显示的条数（可修改）
                pageSize: 10,
                // 当前页面数据
                pagedData: []
            }
        },
        mounted() {
            this.addMemberHandle();
            this.$nextTick(() => {
                axios.get("http://localhost:8080/MillionYuan/getUsername")
                    .then(response => {
                        this.userOptions = response.data;
                    })
            });
        },
        methods: {
            addMemberHandle() {
                axios.get("http://localhost:8080/MillionYuan/getAlladInfo")
                    .then((resp) => {
                        this.tableData1 = resp.data;
                        this.total = this.tableData1.length;
                        this.handleSizeChange(this.pageSize);
                        console.log(resp.data);
                    })
                    .catch((error) => {
                        console.error("获取数据失败:", error);
                    });
            },
            addUser() {
                var centeredDiv = document.getElementById("windows");
                centeredDiv.style.display = "block";
            },
            onCacel() {
                var centeredDiv = document.getElementById("windows");
                centeredDiv.style.display = "none";
            },
            updateaddUser(ad_id) {
                const index = this.tableData1.findIndex(row => row.ad_id === ad_id);
                if (index !== -1) {
                    const userData = this.tableData1[index];
                    this.updateForm = Object.assign({}, userData);
                    var centeredDiv = document.getElementById("update");
                    centeredDiv.style.display = "block";
                } else {
                    console.error('没用找到对应的值');
                }
            },

            updateonCacel() {
                var centeredDiv = document.getElementById("update");
                centeredDiv.style.display = "none";
            },
            onSubmit(formName) {
                console.log('数据为：', this.advForm);
                this.submitUpload();
                axios.post("http://localhost:8080/MillionYuan/insertAdv", {
                    ad_brand_name: this.advForm.ad_brand_name,
                    ad_website: this.advForm.ad_website,
                    ad_company_name: this.advForm.ad_company_name,
                    ad_description: this.advForm.ad_description,
                    ad_status: this.advForm.ad_status,
                    ad_size: this.advForm.ad_size,
                    user_id: this.advForm.user_id
                }).then((resp) => {
                    this.onCacel(); //关闭窗口
                    this.addMemberHandle(); //更新数据
                    this.$message.success("添加成功");
                });
            },
            removeCol(ad_id) {
                this.$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    console.log("移除的数据为：" + ad_id);
                    axios.post("http://localhost:8080/MillionYuan/delAdv", {
                        ad_id: ad_id,
                    }).then((resp) => {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.addMemberHandle();
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            UpdateonSubmit(formName) {
                this.submitUpload();//上传图片 //TODO BUG
                axios.post("http://localhost:8080/MillionYuan/updateAdv", {
                    ad_id: this.updateForm.ad_id,
                    ad_brand_name: this.updateForm.ad_brand_name,
                    ad_website: this.updateForm.ad_website,
                    ad_company_name: this.updateForm.ad_company_name,
                    ad_description: this.updateForm.ad_description,
                    ad_status: this.updateForm.ad_status,
                    ad_size: this.updateForm.ad_size,
                    user_id: this.updateForm.user_id
                }).then((resp) => {
                    this.$message.success("修改成功");
                    this.updateonCacel();
                    this.addMemberHandle();
                })
            },
            submitUpload() {
                this.$refs.upload.submit();
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            },
            handleSizeChange(val) {
                this.pageSize = val;
                this.currentPage = 1;
                const startIndex = (this.currentPage - 1) * this.pageSize;
                const endIndex = startIndex + this.pageSize;
                this.pagedData = this.tableData1.slice(startIndex, endIndex);
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                const startIndex = (this.currentPage - 1) * this.pageSize;
                const endIndex = startIndex + this.pageSize;
                this.pagedData = this.tableData1.slice(startIndex, endIndex);
            }
        },
    });
</script>
</body>
</html>
